<template>
  <div class="flex-align-center" style="flex-wrap: wrap;">
    <div v-for="(item, index) in value" :key="index" class="imgBox"
      :style="{ width: width + 'px', height: (height ? height : width) + 'px' }">
      <el-image class="imgList" style="width: 100px; height: 100px" :src="item" fit="fill" preview-teleported
        :preview-src-list="value" />
      <div class="upload-wrapper-del delete"
        :style="{ width: width + 'px', height: (height ? height : width) + 'px', lineHeight: (height ? height : width) + 'px' }"
        @click.stop="handleRemove(index)">
        <el-icon color="#fff" size="18px">
          <Delete />
        </el-icon>
      </div>
    </div>
    <el-upload v-show="value.length < fileLength" :accept="accept" action="#" :http-request="httpRequest"
      :disabled="disabled" :show-file-list="false" :multiple="multiple" :before-upload="beforeAvatarUpload"
      class="avatar-uploader"
      :style="{ '--uploadWidth': width + 'px', '--uploadHeight': (height ? height : width) + 'px' }">
      <el-icon color="#8c939d" size="24px">
        <Plus />
      </el-icon>
    </el-upload>

  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  getCurrentInstance
} from 'vue';

import { ElMessage } from 'element-plus';

import _axios from '@/api/request';
import {
  closeLoading,
  openLoading
} from '@/utils/element';
import {
  Delete,
  Plus
} from '@element-plus/icons-vue';

const { proxy } = <any>getCurrentInstance();
const emit = defineEmits(['listMD'])
const { value, multiple, limitSize, width, height, proportion, sizeVisible, accept, fileLength, disabled } = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  multiple: {
    type: Boolean,
    default: false
  },
  fileLength: {
    default: 20,
    type: Number,
  },
  limitSize: {
    // 文件大小
    default: 10,
    type: [Number, String],
  },
  width: {// 占位大小
    default: 104,
    type: Number,
  },
  height: {
    default: 104,
    type: Number,
  },
  proportion: { // 比例
    default: 1,
    type: [Number, String],
  },
  sizeVisible: {// 是否校验比例
    default: false,
    type: Boolean,
  },
  accept: {
    type: String,
    default: '.png,.jpg'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
function handleRemove(key) {//移除文件
  proxy.value.splice(key, 1)
}
function httpRequest(row) {//发起请求
  openLoading()
  let formData = new FormData();
  formData.append("file", row.file);
  _axios({
    method: "post",
    url: "/hjw-upms/uploadFile",
    data: formData
  })
    .then((res) => {
      proxy.value.push(res.data)
      emit("listMD", res.data, proxy.value);
      closeLoading()
    }).catch(() => {
      closeLoading()
    })
}
function beforeAvatarUpload(file) {//
  const isLt2M = file.size / 1024 / 1024 < parseInt(limitSize);
  if (!isLt2M) {
    ElMessage.error(`上传文件大小不能超过 ${limitSize}MB!`);
    return false;
  }
  return isLt2M;
}
</script>
<style lang="scss" scoped>
.imgList {
  border-radius: 3px;
  cursor: pointer;
}

.imgBox {
  margin-right: 10px;
  position: relative;

  &:hover {
    .delete {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9;
    }
  }

  .delete {
    cursor: pointer;
    display: none;
  }
}

.upload-wrapper-del {
  position: absolute;
  top: 0px;
  background: rgba($color: #000000, $alpha: 0.5);
  border-radius: 3px;
  height: 0px;
}
</style>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: var(--uploadHeight);
  width: var(--uploadWidth);
  transition: var(--el-transition-duration-fast);
}
</style>